/**
 * @file popover-button
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */
import * as React from 'react';
import {Form as FormsyForm} from 'formsy-react';
import {
  PureComponent,
  PropTypes
} from 'react';
import * as cx from 'classnames';
import {findDOMNode} from 'react-dom';
import * as omit from 'lodash/omit';

import {
  Button,
  Overlay
} from 'react-bootstrap';
import SimplePopOver from '../../simple-popover/simple-popover';
import {getDialogContainer} from '../../../util/helper';

export default class PopOverButton extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      open: false
    };

    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
    this.getOffset = this.getOffset.bind(this);
    this.submit = this.submit.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  open() {
    this.setState({
      open: true
    });
  }

  close(e) {
    e && e.preventDefault();

    const {
      onDismiss
    } = this.props;

    onDismiss && onDismiss();

    this.setState({
      open: false
    });
  }

  submit() {
    this.refs.form.submit();
  }

  handleSubmit(models) {
    const {onSubmit} = this.props;

    onSubmit(models);
    this.close();
  }

  getOffset(box) {
    const dom = findDOMNode(this).getBoundingClientRect();
    let x =  (dom.width - box.width) / 2;

    return {
      x,
      y: 5
    }
  }

  render() {
    const {
      icon,
      bodyRender,
      onSubmit
    } = this.props;

    const rest = omit(this.props, ['icon', 'body', 'bodyRender', 'onSubmit', 'onDismiss']);
    const open = this.state.open;

    return (
      <Button
        {...rest}
        onClick={this.open}
      >
        <i className={icon} />

        {open ? (
          <Overlay
            container={getDialogContainer()}
            placement="bottom"
            target={() => findDOMNode(this)}
            onHide={this.close}
            rootClose
            show
          >
            <SimplePopOver className="btn-popover" offset={this.getOffset}>
              <div className="panel panel-default no-border m-b-none">
                <div className="panel-body">
                  <FormsyForm ref="form" onSubmit={this.handleSubmit}>
                  {bodyRender()}
                  </FormsyForm>
                </div>
                <div className="b-t b-light text-right">
                  <button
                    className="btn btn-link"
                    onMouseDown={this.submit}
                  >
                    <i className="fa fa-check text-success" />
                  </button>
                  <button
                    className="btn btn-link"
                    onMouseDown={this.close}
                  >
                    <i className="fa fa-times text-muted" />
                  </button>
                </div>
              </div>
            </SimplePopOver>
          </Overlay>
        ) : null}
      </Button>
    );
  }
}